// 失败 css与js直接耦合 独立css作为js钩子不与css样式耦合
(function($, window, PubSub){
	var tpl = [
	'<div class ="filter-list">',
		'<div class="pure-g">',
		    '<div class="pure-u-1-2 cancel">取消</div>',
		    '<div class="pure-u-1-2">区域<span class="confirm">完成</span></div>',
		    // '<div class="pure-u-1-3">确定</div>',
		'</div>',
		'<div class ="filter-subitem">',
			'<div class="pure-g">',
			    '<div class="pure-u-1-2 left"><div class="pure-g"></div></div>',
			    '<div class="pure-u-1-2 right"><div class="pure-g"></div></div>',
			'</div>',
		'</div>',
	'</div>'
	].join('');

	var source = [
		'<div class="pure-u-1 filter-item" code="">不限</div>',
		'{{each list as value i}}',
	    	'<div class="pure-u-1 filter-item" code="{{value.code}}">{{value.name}}</div>',
	    '{{/each}}'
	].join('');

	function zoneFilter(data) {
		this.state = data.city.subs;
		this.index = 0;
		this.data = {regionCode: '', region: '', district: '', name: '请选择目标区域'};
		this._init();
	}
	zoneFilter.prototype = {
		_init: function() {
			this._appendFilter();
			this._initDom();
			this._initEvents();
			this._renderLeft(this.state);
		},
		_appendFilter: function() {
			this.$body = $("html");
			this.$body.append(tpl);
		},
		_initDom: function() {
			this.left = '.left .filter-item';
			this.right = '.right .filter-item';
			this.cancel = '.filter-list .cancel';
			this.confirm = '.filter-list .confirm';
			this.$left = $('.left .pure-g');
			this.$right = $('.right .pure-g');
		},
		_initEvents: function() {
			var self = this;
			this.$body.on('click', this.left, function() {
				self._handleLeft.call(this, self);
			});
			this.$body.on('click', this.right, function() {
				self._handleRight.call(this, self);
			});
			this.$body.on('click', this.cancel, function() {
				self._hide();
			});
			this.$body.on('click', this.confirm, function() {
				self._hide();
				PubSub.publish('0', self.data);
			});
		},
		_renderLeft: function(data) {
			var render = template.compile(source);
			var html = render({list: data});
			this.$left.empty().append(html);
		},
		_renderRight: function(data) {
			var render = template.compile(source);
			var html = render({list: data});
			this.$right.empty().append(html);
		},
		_handleLeft: function(self) {

			$(this).addClass("selected").siblings().removeClass("selected");
			self.index = $(this).index();
			if(!$(this).attr('code')) {
				self.$right.empty();
				self.data.district = '厦门';
				self.data.region = '厦门';
				self.data.regionCode = '3502';
				self.data.name = '厦门'
				return
			}
			
			self.data.name = $(this).text();
			self.data.district = $(this).text();
			self.data.region = $(this).text();
			self.data.regionCode = $(this).attr('code');

			self._renderRight(self.state[self.index - 1].subs);
		},
		_handleRight: function(self) {
			var that = $(this);
			that.addClass("selected").siblings().removeClass("selected");
			if(that.index() != 0) {
				self.data.region = $(this).text();
				self.data.regionCode = $(this).attr('code');
				self.data.name = self.data.district + '-' + $(this).text();
			} else {
				self.data.district = '厦门';
				self.data.name = '厦门' + '-' + self.data.region;
			}
		},
		_hide: function() {
			this.$body.removeClass('zone');
		}
	}

	window.zoneFilter = zoneFilter;


	var filterTpl = [
		'<div class ="screen-list">',
			'<div class="pure-g">',
			    '<div class="pure-u-1-3 cancel">取消</div>',
			    '<div class="pure-u-1-3">筛选</div>',
			    '<div class="pure-u-1-3 confirm">完成</div>',
			'</div>',
			'<div class ="screen-subitem">',
				'<div class="pure-g screen-item">',
				    '<div class="pure-u-1" price="¥800-¥1200">¥800-¥1200</div>',
				    '<div class="pure-u-1" price="¥1200-¥1500">¥1200-¥1500</div>',
				    '<div class="pure-u-1" price="¥1500-¥2000">¥1500-¥2000</div>',
				    '<div class="pure-u-1" price="¥2000+">¥2000+</div>',
				'</div>',
			'</div>',
		'</div>'
	].join('');

	function screenFilter() {
		this._init();
	}

	screenFilter.prototype = {
		_init: function() {
			this.data = {price: '', name: '请选择租金预算'};
			this._initDom();
			this._handleEvent();
		},
		_initDom: function() {
			this.$body = $("html");
			this.$body.append(filterTpl);
			this.cancel = '.screen-list .cancel';
			this.confirm = '.screen-list .confirm';
			this.item = '.screen-item div';
		},
		_handleEvent: function() {
			var self = this;
			this.$body.on('click', this.cancel, function() {
				self._hide();
			});
			this.$body.on('click', this.confirm, function() {
				self._hide();
				
				self.data.price = self.data.price;
				self.data.name = self.data.price;
				PubSub.publish('1', self.data);
			});
			this.$body.on('click', this.item, function() {
				var that = $(this);
				that.addClass("selected").siblings().removeClass("selected");
				self.data.price = that.attr('price');
			});
		},
		_hide: function() {
			this.$body.removeClass('filter');
		}
	}

	window.screenFilter = screenFilter;

	var sortTpl = [
		'<div class ="sort-list">',
			'<div class="pure-g">',
			    '<div class="pure-u-1-3 cancel">取消</div>',
			    '<div class="pure-u-1-3">排序</div>',
			    '<div class="pure-u-1-3 confirm">完成</div>',
			'</div>',
			'<div class ="sort-subitem">',
				'<div class="pure-g sort-item">',
				    '<div class="pure-u-1" day="7">7天内</div>',
				    '<div class="pure-u-1" day="15">15天内</div>',
				    '<div class="pure-u-1" day="30">30天内</div>',
				    '<div class="pure-u-1" day="60">2个月内</div>',
				'</div>',
			'</div>',
		'</div>'
	].join('');

	function sortFilter() {
		this._init();
	}

	sortFilter.prototype = {
		_init: function() {
			this.data = {order: '', name: '前选择预住时间'};
			this._initDom();
			this._handleEvent();
		},
		_initDom: function() {
			this.$body = $("html");
			this.$body.append(sortTpl);
			this.cancel = '.sort-list .cancel';
			this.confirm = '.sort-list .confirm';
			this.item = '.sort-item div';
		},
		_handleEvent: function() {
			var self = this;
			this.$body.on('click', this.cancel, function() {
				self._hide();
			});
			this.$body.on('click', this.confirm, function() {
				self._hide();
				PubSub.publish('2', self.data)
			});
			this.$body.on('click', this.item, function() {
				var that = $(this);
				
				that.addClass("selected").siblings().removeClass("selected");
				self.data.day = that.attr('day');
				self.data.name = that.text();
			});
		},
		_hide: function() {
			this.$body.removeClass('sort');
		}
	}

	window.sortFilter = sortFilter;

})($, window, PubSub)